---
description:
  Learn about handling different types of errors in your GraphQL application with Apollo Client,
  including GraphQL errors, server errors, transaction errors, UI errors, and Apollo Client errors.
  Explore error policies such as "none," "ignore," and "all," and how to set them on each request.
  Handle network errors with Apollo Link and the @apollo/client/link/error. Check out the "Error
  Handling" chapter on Apollo Client documentation for more details.
---

# Error Handling

Any application, from simple to complex, can have its fair share of errors. It is important to
handle these errors and when possible, report these errors back to your users for information. Using
GraphQL brings a new set of possible errors from the actual GraphQL response itself. With that in
mind, here are a few different types of errors:

- GraphQL Errors: errors in the GraphQL results that can appear alongside successful data
- Server Errors: server internal errors that prevent a successful response from being formed
- Transaction Errors: errors inside transaction actions like `update` on mutations
- UI Errors: errors that occur in your component code
- Apollo Client Errors: internal errors within the core or corresponding libraries

## Error Policies

Much like `fetchPolicy`, `errorPolicy` allows you to control how GraphQL Errors from the server are
sent to your UI code. By default, the error policy treats any GraphQL Errors as network errors and
ends the request chain. It doesn't save any data in the cache, and renders your UI with the `error`
prop to be an `ApolloError`. By changing this policy per request, you can adjust how GraphQL Errors
are managed in the cache and your UI. The possible options for `errorPolicy` are:

- `none`: This is the default policy to match how Apollo Client 1.0 worked. Any GraphQL Errors are
  treated the same as network errors and any data is ignored from the response.
- `ignore`: Ignore allows you to read any data that is returned alongside GraphQL Errors, but
  doesn't save the errors or report them to your UI.
- `all`: Using the `all` policy is the best way to notify your users of potential issues while still
  showing as much data as possible from your server. It saves both data and errors into the Apollo
  Cache so your UI can use them.

You can set `errorPolicy` on each request like so:

```ts
const MY_QUERY = gql`
  query WillFail {
    badField
    goodField
  }
`;

@Component({
  // ...
})
class ShowingSomeErrorsComponent {
  constructor(private readonly apollo: Apollo) {
    this.myQuery = this.apollo.watchQuery({
      query: MY_QUERY,
      errorPolicy: 'all',
    });
  }
}
```

Any errors reported will come under an `error` prop alongside the data returned from the cache or
server.

## Network Errors

When using `Apollo Link`, the ability to handle network errors is way more powerful. The best way to
do this is to use the `@apollo/client/link/error` to catch and handle server errors, network errors,
and GraphQL errors.

```ts
import { onError } from '@apollo/client/link/error';

const link = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});
```

Error Link takes a function that is called in the event of an error. This function is called with an
object containing the following keys:

- `operation`: The Operation that errored
- `response`: The response from the server
- `graphQLErrors`: An array of errors from the GraphQL endpoint
- `networkError`: any error during the link execution or server response

Ignoring errors

If you want to conditionally ignore errors, you can set `response.errors = null` within the error
handler:

```ts
onError(({ response, operation }) => {
  if (operation.operationName === 'IgnoreErrorsQuery') {
    response.errors = null;
  }
});
```
